<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title></title>
    <script src="../js/mui.min.js"></script>
    <link href="../css/mui.min.css" rel="stylesheet"/>
    <link href="../css/mui.picker.min.css" rel="stylesheet" />
    <link href="../style/fjol_style.css" rel="stylesheet" />
    <link href="../css/iosSelect.css" rel="stylesheet" />
    
    <script type="text/javascript" charset="utf-8">
      	mui.init();
    	
   		
    </script>
	</head>
	<style>
		.mui-input-row label~input, .mui-input-row label~select, .mui-input-row label~textarea{
			margin-right: 10px;
			width: 50%;
		}
		.mui-input-row .mui-input-clear~.mui-icon-clear, .mui-input-row .mui-input-password~.mui-icon-eye, .mui-input-row .mui-input-speech~.mui-icon-speech{
			width: 30px;
		}
	</style>
	<body>
		<header class="mui-bar mui-bar-nav">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <h1 class="mui-title">出租房屋</h1>
		</header>
		<div class="mui-content">
		    <div class="mui-scroll-wrapper" style="bottom: 40px; top: 40px;">
		        <div class="mui-scroll">
		            <!--这里放置真实显示的DOM内容-->
		            <ul class="mui-table-view mt10">
	                    <li class="mui-table-view-cell">
	                        <a class="mui-navigate-right" id="searchBuilding">
	                     楼盘名称
	                    		<span class="mui-pull-right mr10"></span>
	                		</a>
	                    </li>
	                    <li class="mui-table-view-cell">
	                     地址
	                    <textarea class="mui-pull-right p0" rows="5" id="address" style="width: 88%; border: none;"></textarea>

	                    </li>
	                </ul>
		            
		            <p class="mt10">房源信息</p>
		            <div class="mui-input-group mt5">
					    <div class="mui-input-row">
					        <label>楼栋号</label>
					        <input type="text" id="buildNumber" class="mui-input-clear mui-text-right" placeholder="" value="">
					    </div>
					    <div class="mui-input-row">
					        <label>门牌号</label>
					        <input type="text" id="number" class="mui-input-clear mui-text-right" placeholder="" value="">
					    </div>
					    <div class="mui-input-row" id="houseType">
					        <label>户型</label>
					        <input type="text" class="mui-text-right" placeholder="" value="1室0厅0卫">
					    </div>
					    <div class="mui-input-row">
					        <label>面积</label>
					        <button type="button" class="mui-btn-green mui-btn-outlined mui-pull-right p0 mt10 f08">平方</button>
					        <input type="number" id="square" class="mui-input-clear mui-text-right mui-pull-right" placeholder="" value="">
					    </div>
					    <div class="mui-input-row">
					        <label>租金</label>
					        <button type="button" class="mui-btn-green mui-btn-outlined mui-pull-right p0 mt10 f08">元/月</button>
					        <input type="number" id="sellPrice" class="mui-input-clear mui-text-right mui-pull-right" placeholder="" value=""/>
					    </div>
					    <div class="mui-input-row" id="rentalMethod">
					        <label>出租方式</label>
					        <input type="text" id="rentalMethodinput" readonly class="mui-text-right mui-pull-right" value="整租"/>
					    </div>
					</div>
		            
		            <p class="mt10">联系方式</p>
		            <div class="mui-input-group mt5">
					    <div class="mui-input-row">
					        <label>姓名</label>
					        <input type="text" id="realname" class="mui-input-clear mui-text-right" value="" placeholder="怎么称呼您？">
					    </div>
					    <div class="mui-input-row">
					        <label>手机号</label>
					        <input type="number" id="mobile" class="mui-input-clear mui-text-right" value="" placeholder="必填">
					    </div>
					</div>
					<p class="p10">请留下您的联系方式，我们的经纪人将会在第一时间与您联系</p>
		        </div>
		    </div>
		    <nav class="mui-bar mui-bar-tab" style="background: none; box-shadow: none;">
		    	<button type="button" class="mui-btn mui-btn-green green02b260 mui-btn-block pct80 mauto" id="submitIssue">提交</button>
		    </nav>
		</div>
		<script src="../css/iosSelect.js"></script>
		<script src="../js/md5.js"></script>
		<script src="js/common.util.js"></script>
		<script src="../js/network.js"></script>
		<script src="../js/md5.js"></script>
		<script src="../js/enum.util.js"></script>
		<script src="js/common.util.js"></script>
		<script src="../js/mui.picker.min.js"></script>
		<script src="../js/xzx.open.js"></script>
		<script>
			mui('.mui-scroll-wrapper').scroll({
			deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
		});
		
		document.querySelector('#searchBuilding').addEventListener('tap',function(){
			openFileWindowWithPage('../selle_house','search_building',{
				parentId:'rentHouse'
			});
			
		});
		mui.plusReady(function(){
			
			var buildingId=null;
			var leaseType = 1;
			var bedRoomNumber=1,livingRoomNumber=0,toiletNumber=0;
			
			var houseType = document.querySelector('#houseType');//房型
			
			var bedRoomData = [{
				'id':'1',
				'value':'1室'
			}];
			var livingRoomData = [{
				'id':'0',
				'value':'厅'
			}];
			var toiletRoomData = [{
				'id':'0',
				'value':'卫'
			}];
			for (var i=0; i<10; i++) {
				bedRoomData[i]={
					'id':i+1,
					'value':i+1+'室'
				};
				if(i==9){
					bedRoomData[i]={
						'id':i+1,
						'value':'10室及以上'
					}
				}
			}
			for (var i=0; i<=10; i++) {
				livingRoomData[i]={
					'id':i,
					'value':i+'厅'
				};
				if(i==10){
					livingRoomData[i]={
						'id':i,
						'value':'10厅及以上'
					}
				}
				toiletRoomData[i]={
					'id':i,
					'value':i+'卫'
				};
				if(i==10){
					toiletRoomData[i]={
						'id':i,
						'value':'10卫及以上'
					}
				}
			}
			
			houseType.addEventListener('tap', function () {
				
		    var sanguoSelect = new IosSelect(3, 
		        [bedRoomData,livingRoomData, toiletRoomData],
		        {
		            title: '选择户型',
		            itemHeight: 35,
		            callback: function (selectOneObj, selectTwoObj, selectThreeObj) {
		                bedRoomNumber = selectOneObj.value;
		                livingRoomNumber = selectTwoObj.value;
		                toiletNumber = selectThreeObj.value;
		                document.querySelector('#houseType input').value = selectOneObj.value+selectTwoObj.value+selectThreeObj.value;
		            }
				});
			});
			
			document.addEventListener('getBuilding',function(event){
				buildingId = event.detail.buildingId;
				var buildingName = event.detail.buildingName;
//				console.log(buildingName);
				document.querySelector('#searchBuilding span').innerHTML = buildingName;
			});
			
			
			//选择出租方式
			document.querySelector('#rentalMethod').addEventListener('tap',function(){
				
				var houseTypePicker = new mui.PopPicker();
				var houseTypeArr = new Array();
				var getHouseType = enumUtils.getEnumDataByType('rentalMethod');	//租房类型：整租、合租
				for (i in getHouseType) {
					houseTypeArr[i]={
						text:getHouseType[i].name,
						value:getHouseType[i].value
					}
				}
				houseTypePicker.setData(houseTypeArr);
				houseTypePicker.pickers[0].setSelectedValue('fourth', 2000);
				houseTypePicker.show(function(SelectedItem) {
					houseTypeName = SelectedItem[0].text;
					leaseType = SelectedItem[0].value;
					document.querySelector('#rentalMethodinput').value = houseTypeName;
				});
			});
			
			document.querySelector('#submitIssue').addEventListener('tap',function(){
//				console.log(leaseType);
				var address = document.querySelector('#address').value;//地址
				var buildNumber = document.querySelector('#buildNumber').value;//楼栋号
				var houseNumber = document.querySelector('#number').value;//门牌号
				var square = document.querySelector('#square').value;//面积
				var sellPrice = document.querySelector('#sellPrice').value;//售价
				var realname = document.querySelector('#realname').value;//姓名
				var mobile = document.querySelector('#mobile').value;//手机号
//				console.log(bedRoomNumber);

				if(realname==''){
					mui.alert('请留下您的真实姓名，以便我们称呼您');
					return false;
				}
				if(mobile==''){
					mui.alert('请留下您的手机号，以便我们联系您');
					return false;
				}else if(!(/^1\d{10}$/.test(mobile))){
						mui.alert('请填写正确的手机号，以便我们联系您');
						return false;
				}
					var param = [{
						key:'kind',
						value:3
					},{
						key:'buildingId',
						value:buildingId
					},{
						key:'address',
						value:address
					},{
						key:'buildNumber',
						value:buildNumber
					},{
						key:'number',
						value:houseNumber
					},{
						key:'bedRoomNumber',
						value:bedRoomNumber
					},{
						key:'livingRoomNumber',
						value:livingRoomNumber
					},{
						key:'toiletNumber',
						value:toiletNumber
					},{
						key:'square',
						value:square
					},{
						key:'leasePriceMonth',
						value:sellPrice
					},{
						key:'realname',
						value:realname
					},{
						key:'mobile',
						value:mobile
					},{
						key:'leaseType',
						value:leaseType
					}];
					fjNetwork.post('fjzx/client/add-house-publish.json',param,function(data){
//						console.log(JSON.stringify(data));
						mui.toast(data.msg);
					},function(msg){
//						console.log(msg);
						mui.toast(msg);
					});
				
			});
		
		});
		</script>
	</body>
</html>
